<template>
    <div id="box">
        <el-row>
            <el-col :span="12" :offset="6">
                <div class="detail">
                    <div class="detail-title">
                        <h2 class="detail-main-title">这里是第{{$route.params.id-1}}条文章的详情页</h2>
                        <h4 class="detail-sub-title">副标题</h4>
                    </div>
                    <div class="detail-content">
                        <p>这里是内容</p>
                        <p>Nuxt.js 是一个基于 Vue.js 的通用应用框架。</p>
                        <p>通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。</p>
                        <p>我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。</p>
                        <p>Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。</p>   
                        <p>除此之外，我们还提供了一种命令叫：nuxt generate ，为基于 Vue.js 的应用提供生成对应的静态站点的功能。</p>
                        <p>我们相信这个命令所提供的功能，是向开发集成各种微服务（Microservices）的 Web 应用迈开的新一步。</p> 
                        <p>作为框架，Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。</p>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import ArticleList from '@/components/ArticleList'
export default {
    validate({ params }) {
        // 必须是number类型
        return /^\d+$/.test(params.id)
    },
    components: {},
    data() {
        return {
        }
    }, 
    async asyncData({$axios,query}){
        let articleList = []
        let page = 1
        let limit = 10
        let noMore = false
        let loading = false
        // ?page=1&limit=2&id=1&type_id=0
        await $axios({url:'/index/articleList',params:{page:page,limit:limit,id:query.id,type_id:query.type_id}}).then(res=>{
            if(res.status === 20000){
                if(Math.ceil(res.data.total/limit) <= page){
                    noMore = true
                }
                articleList = res.data.list
            }
        })
        return {  
            articleList:articleList,
            page:page,
            limit:limit,
            noMore:noMore,
            loading:loading,
            id:query.id,
            type_id:query.type_id
        }
    },
    watch:{
        $route:{
            immediate:true,
            handler(route){
                if(this.id === route.query.id && this.type_id === route.query.type_id){
                    return
                }
                let articleList = []
                let page = 1
                let limit = 10
                let noMore = false
                let loading = false
                this.$axios({url:'/index/articleList',params:{page:page,limit:limit,id: route.query.id,type_id:route.query.type_id}}).then(res=>{
                    if(res.status === 20000){
                        if(Math.ceil(res.data.total/limit) <= page){
                            noMore = true
                        }
                        this.articleList = res.data.list
                        this.page = page
                        this.limit = limit
                        this.noMore = noMore
                        this.loading = loading
                        this.id = route.query.id
                        this.type_id = route.query.type_id
                    }
                })
                
            }
        }
    },

}    
</script>    
<style lang="scss" scoped>
#box{
    width: 100%;
    // height: 100px;
    overflow-y:auto;
}

.detail{
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
} 

.detail-title{
    padding: 20px 0;
    text-align: center;
    border-bottom: 1px solid;
    .detail-main-title{
        margin-bottom: 10px;
    }
}

.detail-content{
    line-height: 30px;
    text-indent: 2em;
}

</style>